<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">上课详情</block>
    </cu-custom>
    <view style="margin-bottom: 110rpx;">
      <view class="u-f-ac u-f-jsb title">
        <view>{{title}}</view>
        <view>{{minute}}:{{second}}/<text style="font-size: 26rpx;">45:00</text></view>
      </view>

      <view style="padding: 30rpx 0 70rpx;">
        <view class="step-top u-f-ac u-f-jsb">
          <view>全部训练动作</view>
          <view class="search_history_remark u-f-ac u-f-jsb">
            <view class="cuIcon-order u-f-ajc">替换</view>
            <view class="cuIcon-time u-f-ajc">历史</view>
            <view class="cuIcon-edit u-f-ajc">备注</view>
          </view>
        </view>
        <uni-steps :options="list1" active-color="#007AFF" :active="active" @change="change" />
      </view>

      <block v-for="(item, index) in list1" :key="index">
        <template v-if="active == index">
          <view class="action-detail">
            <view class="item-list u-f-ac u-f-jsb">
              <view class="item-nums">数量</view>
              <view class="item-nums">重量</view>
              <view class="item-nums">休息</view>
              <view class="item-nums">器械</view>
              <view class="item-nums" style="flex: 1;text-align: center;">完成情况</view>
            </view>

            <view class="item-list specials u-f-ac u-f-jsb" v-for="(item2, index2) in item.groupList" :key="index2">
              <view class="item-nums item-nums2">{{item2['次数'] ? item2['次数']+'次' : '-'}}</view>
              <view class="item-nums item-nums2">{{item2['阻力'] ? item2['阻力']+'KG' : '-'}}</view>
              <view class="item-nums item-nums2">{{item2['间休'] ? item2['间休']+'S' : '-'}}</view>
              <view class="item-nums item-nums2">{{item2['器械'] || '-'}}</view>
              <view class="item-nums" style="flex: 1;text-align: center;">
                <view class="u-f-ajc">
                  <!-- <view v-for="(item3, index3) in item2.emojiList" :key="index3" @click="selectEmoji(index, index2, index3)"
                    class="emoji-item">
                    <image :src="item3" />
                  </view> -->
                  <view v-for="(item3, index3) in emojiList" :key="index3" @click="selectEmoji(index, index2, index3)"
                    class="emoji-item" :class="['cuIcon-'+item3, item2.active === index3 .toString()? 'acticeClass': '']"></view>
                </view>
              </view>
            </view>

            <view class="add-group u-f-ajc" @click="addGroup(index)">
              <text class="cuIcon-add" style="font-weight: 600;"></text>添加组
            </view>
          </view>
        </template>
      </block>

      <!-- 销客码显示区 -->
      <view class="cu-modal" :class="modalName=='Image'?'show':''" @click.stop="hideModal">
        <view class="cu-dialog">
          <view class="bg-img" style="height:400px;">
            <image :src="bg_qrcode" mode="widthFix" style="top: 50%;left: 50%;transform: translate(-50%, -50%);position: absolute;width: 300px;"></image>
            <view class="cu-bar justify-end text-white">
              <view class="action">
                <text class="cuIcon-close "></text>
              </view>
            </view>
          </view>

        </view>
      </view>
      <canvas canvas-id="qrcode" style="width: 600px;height: 600px;position: fixed;top: 9999999rpx;left: 1000rpx;" />

    </view>

    <view @click="showModals" style="position: fixed;bottom: 0;z-index: 99; width: 100%;height: 100upx;line-height: 100upx;text-align: center;background-color: #39BB9E;color: #fff;font-size: 32upx;">
      上课结束
    </view>
  </view>
</template>

<script>
  var timer;
  import uniSteps from '../../components/uni-steps/uni-steps.vue';
  import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
  export default {
    components: {
      uniSteps,
    },
    data() {
      return {
        beforeClass: {},
        title: '第一次训练课',
        datas: {},

        list1: [],
        active: 0,
        emojiList: ['close', 'emoji', 'check'],
        minute: '00',
        second: '00',

        modalName: null,
        bg_qrcode: '', // 二维码图片
        uQRCode: '', // 二维码信息
        setYuyue: {},
      }
    },
    onLoad(e) {
      timer = setInterval(() => {
        this.second = parseInt(this.second) + 1
        if (this.second < 10) this.second = '0' + this.second
        if (this.second > 60) {
          this.second = '00'
          this.minute = parseInt(this.minute) + 1
          if (this.minute < 10) this.minute = '0' + this.minute
        }
        // console.log('second', typeof this.second, this.second)
        // console.log('minute', typeof this.minute, this.minute)
      }, 1000)
      this.beforeClass = uni.getStorageSync("beforeClass");
      this.getData(this.beforeClass.planCourseId);
    },
    methods: {
      async getYuyueQrcode() {
        try {
          var res = await this.$myRuquest({
            url: '/coach/training/getReserverationState',
            data: {
              rId: uni.getStorageSync('yuyue').rId
            },
          })
          this.$showToast('销课成功~')
          if (res.data.result == 200) {
            console.log('有数据，赋值')
            this.setYuyue = res.data.datas
          }
        } catch (e) {
          console.log('接口异常！', e)
        }

        console.log('查看预约数据', res)
      },
      async hideModal(e) {
        this.modalName = null
        await this.getYuyueQrcode();
        let obj = {
          list: this.list1,
          setYuyue: this.setYuyue,
          times: {
            minute: this.minute,
            second: this.second,
          },
        }
        uni.setStorageSync("list1", obj);
        clearInterval(timer);
        wx.navigateTo({
          url: '/pagesA/Preparation_plan/Training_summary'
        })

      },
      //点击时间列表 弹出销客弹窗
      showDetail() {
        let item = uni.getStorageSync('yuyue');
        this.uQRCode = 'https://jxjssservice.jxfit.cn?courseId=' + item.courseId + '&rId=' + item.rId + '&coachId=' +
          uni.getStorageSync('openid')
        this.modalName = 'Image'
        this.make()
      },
      async make() {
        var that = this
        // 回调方式
        uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: that.uQRCode,
          size: 200,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H,
          success: res => {}
        })

        // Promise
        uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: that.uQRCode,
          size: 400,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H
        }).then(res => {})

        // 同步等待
        var res = await uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: that.uQRCode,
          size: 400,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H
        })
        console.log('打印二维码信息', res)
        this.bg_qrcode = res
      },
      async getData(planCourseId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getTrainingPlanCourseDetail",
          data: {
            planCourseId
          }
        })
        this.datas = datas;
        this.title = datas.name;
        let computeds = (names) => {
          datas[names].forEach((item, index) => {
            this.$set(item, 'active', '');
            this.$set(item, 'isShow', false);
            item.groupList.forEach(item2 => {
              this.$set(item2, 'active', '');
            })
            let obj = item
            obj.title = item.name
            obj.desc = item.gropNum
            this.list1.push(obj)
          })
        }
        if (datas.hotTraining.length) computeds('hotTraining');
        if (datas.relaxTraining.length) computeds('relaxTraining');
        if (datas.formalTraining.length) computeds('formalTraining');
      },

      change(e) {
        this.active = e
      },
      selectEmoji(index, index2, index3) {
        this.list1[index].groupList[index2].active = index3.toString();
        console.log(this.list1[index].groupList.filter(item => item.active))
        if (this.list1[index].groupList.filter(item => item.active).length) {
          this.list1[index].active = this.list1[index].groupList[index2].active
        }
      },
      addGroup(index) {
        let bl = this.list1[index];
        let obj = {
          '次数': bl.numOfGroup,
          '器械': bl.groupList[0]['器械'],
          '阻力': bl.obstruction,
          '间休': bl.restOfGroup,
          active: '',
        }
        bl.groupList.push(obj)
      },
      showModals() {
        let that = this;
        uni.showModal({
          title: '温馨提示~',
          content: '您确定要结束课程么~',
          cancelText: '放弃课程',
          confirmText: '完成',
          success: function(res) {
            if (res.confirm) {

              that.showDetail();

            } else if (res.cancel) {
              uni.showModal({
                title: '您确定要结束课程么~',
                content: '将删除本科训练课的相关操作记录，恢复到待上课前状态',
                success: function(res) {
                  if (res.confirm) {
                    uni.setStorageSync("list1", {});
                    uni.navigateBack({
                      delta: 1
                    })
                  } else if (res.cancel) {}
                }
              })
            }
          }
        })
      },
      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },

    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff !important;
  }

  .title {
    width: 100%;
    font-size: 36upx;
    font-weight: 600;
    padding: 40rpx;
    border-bottom: 20rpx solid #F7F5F8;
  }

  .step-top {
    width: 100%;
    padding: 20rpx;
    margin-bottom: 20rpx;
  }

  .search_history_remark {
    font-size: 24rpx;

    >view {
      width: 100rpx;
      height: 40rpx;
      border-radius: 20rpx;
      border: 1px solid #ccc;
      margin-right: 20rpx;
      color: #ccc;
    }
  }

  .action-detail {
    padding: 0 20rpx;

    .item-list {
      padding: 20rpx;
      font-size: 24rpx;
      margin-bottom: 20rpx;
      color: #999;

      .item-nums {
        padding: 0 30rpx;
      }
    }

    .specials {
      background-color: #FBF8FB;
      padding: 30rpx 20rpx;

      .item-nums2 {
        border-right: 1px solid #ddd;
      }
    }

    .add-group {
      border: 1px dashed #ddd;
      padding: 30rpx 0;
    }
  }

  .emoji-item {
    width: 40rpx;
    height: 40rpx;
    margin: 0 10rpx;
    font-size: 32rpx;

    >image {
      width: 100%;
      height: 100%;
    }
  }

  .acticeClass {
    color: #FFC765;
  }
</style>
